WebAR 入門
ARとは
拡張現実(Augmented Reality)とはディスプレイ上の現実世界にデジタルの情報を加える技術
https://gyazo.com/41a2dbe7a2762b5e9e52eeb4e77ad8a2
VR(仮想現実、Virtual Reality)：仮想空間に自分が実際にいるような体験ができる技術
MR(複合現実、Mixed Reality)：現実世界の情報を仮想空間に反映させる技術
SR(代替現実、Substitutional Reality)：現実世界と過去の映像を混同させて、過去のものが現実に存在するように錯覚させる技術
XR：総称
ARの種類
マーカー
マーカーを事前に設定し、認識したマーカーに対応するコンテンツを表示する
処理が軽い。安定してる。
https://gyazo.com/2d26651cb2c11dce7f099d341c9189bf
画像
マーカーと同様に設定した画像を認識してそれに対応するコンテンツを表示する。
処理が重い。自由度は高い。
ロケーション
GPSの位置情報に対応づけてコンテンツを表示する。
空間認識
現実世界を立体的に認識して、物理的に自然な位置にコンテンツを表示する。
WebARの活用事例
サンワカンパニーオンラインストア
https://gyazo.com/11e0e4f3594efaf596c4732e101cbc37
キッチンの試し置きができる。
WebARで読むメディア
https://gyazo.com/49b1d86e887c0661f5b04ed74c6d0f39
展開されたAR画像をクリックすると、その記事を閲覧できる。
ARの広告
AR花火
新聞の紙面上に花火が観れる。
現在地に合わせた音楽体験
現在位置・時間・天気・気分などを解析し、いまいる場所に合わせた音楽が自動で再生される体験の実証実験。
ソーシャルディスタンスを計測
WebARの開発
AR関連のライブラリは以下のどちらか(もしくは両方を含むもの)に分類できそう。
画像認識
レンダリング
AR.js
webglとwebrtcに対応しているブラウザあれば利用可能。
マーカー、画像、ロケーションが利用できる。
JSARToolKitというライブラリによってマーカー(画像)を認識して、
Three.jsかA-Frameというライブラリでコンテンツをレンダリングする。
A-Frame：WebVRのためのフレームワーク
jeelizAR
物体認識のライブラリ。
ニューラルネットワークを利用して物体認識している。
model-viewer
3Dモデルを簡単に表示できるコンポーネント。
iOSのSafariではAR機能が使えて、AndroidはARCoreに対応している端末であればAR機能が使えるっぽい。
8th Wall
WebARの開発プラットフォーム。有料。 }
自己位置推定、顔認識、画像マーカー等いろいろできる。
他のライブラリと併用できる。
サンプル
code: html
<html>
<!-- ライブラリの読み込み -->
<body style="margin: 0px; overflow: hidden;">
<a-scene embedded arjs="sourceType: webcam; detectionMode: mono_and_matrix;">
<!-- オブジェクトファイルとマテリアルファイルを読み込む-->
<a-assets>
<a-asset-item
id="cola-obj"
src="models/cola/mpm_v09_35__Coca-Cola.obj"
</a-asset-item>
<a-asset-item
id="cola-mtl"
src="models/cola/mpm_v09_35__Coca-Cola.mtl"
</a-asset-item>
</a-assets>
<!-- マーカー上になにを展開するかを書く -->
<a-marker preset="hiro">
<a-obj-model
src="#cola-obj"
mtl="#cola-mtl"
position="0 0 0"
scale="0.005 0.005 0.005"
</a-obj-model>
</a-marker>
<!-- カメラ -->
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
おそらく使ってるモデルが原因で期待した動作にならないことが多いのでGIF
https://gyazo.com/ffae3d97a57d2868f27c0368ae7385a7
まとめ
レンダリングのフレームワークを使用することでかなり簡単に実装できた。
個人的に案件ですぐに活用できそうなのはmodel-viewerだと思う。
認識系のライブラリが進歩すればもっと柔軟にWebARが活用できそう。